<!--
 * @Author: Bonnie
 * @Date: 2021-12-03 11:43:15
 * @LastEditTime: 2021-12-03 14:37:08
 * @LastEditors: Bonnie
 * @Description: 
 * @FilePath: /public_demo/src/views/rotating_ring/index.vue
-->
<template>
  <div class="root-container">
    <div class="parent">
      <div class="child"></div>
    </div>
    <div>
      需要掌握技术点：
      <br />1. background-image
      <br />2. background-position
      <br />3. background-size
      <br />4. animation
      <br />5. ::after ::before
    </div>
  </div>
</template>
<script>
export default {
  name: "index",
  data() {
    return {};
  }
};
</script>
<style lang='scss' scoped>
.parent {
  width: 500px;
  height: 500px;
  border: 1px solid #b2b6b6;
  margin: 0 auto;
  .child {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin: 150px auto;
    position: relative;
    overflow: hidden;
    &::before {
      content: "";
      width: 200%;
      height: 200%;
      position: absolute;
      z-index: 1;
      left: -50%;
      top: -50%;
      background-image: linear-gradient(#399953, #399953),
        linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33),
        linear-gradient(#377af5, #377af5);
      background-position: 0 0, 0 100%, 100% 100%, 100% 0;
      background-repeat: no-repeat;
      background-size: 50% 50%, 50% 50%;
      animation: rotate 3s linear infinite;
      // 旋转 3s一个周期  无限循环
    }
    &::after {
      content: "";
      width: 90%;
      height: 90%;
      border-radius: 50%;
      position: absolute;
      top: 5%;
      left: 5%;
      z-index: 1;
      background-color: rgba(245, 248, 255, 1);
    }
    @keyframes rotate {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }
  }
}
</style>